<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue'

const percentage = ref<number>(5)
const duration = computed(() => Math.floor(percentage.value / 10))

const increase = () => {
  percentage.value += 5
  if (percentage.value > 100) {
    percentage.value = 100
  }else {
    setTimeout(increase, 1000);
  }
}

onMounted(() => {
  if (percentage.value <= 100) {
    setTimeout(increase, 1000);
  }
});
</script>

<template>
  <el-progress
    :percentage="percentage"
    :stroke-width="15"
    status="success"
    striped
    striped-flow
    :duration="duration"
  />
</template>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>
